<template>
    <div class="content">
        <div id="topBackground">
            <!--  mode="aspectFit"表示缩放的模式为“保持纵横比缩放图片，并可以完整显示图片 -->
            <u-image
                class="u-padding-26"
                width="100%"
                height="80rpx"
                src="/static/toolbox.png"
                mode="aspectFit"
            ></u-image>
            <!-- 如果是设置background-image则写成：<view class="content" :style="{backgroundImage: 'url('+imageURL+')'}"> -->
            <p id="title">YY工具箱</p>
        </div>

        <div id="toolDiv">
            <!-- 种类的标题 -->
            <h1 class="classification">信息查询</h1>
            <!-- 宫格布局（2列） -->
            <u-grid :col="2" :border="false">
                <!-- 使用v-for遍历数组（注意！:key绑定的不能是一个对象，而是具体的字符串等数据，否则会有警告）
                :custom-style="{alignItems: 'flex-start'}"为自定义样式，这里设置为居左-->
                <u-grid-item :custom-style="{ alignItems: 'flex-start' }">
                    <!-- 分类卡片的背景div（含有图片） -->
                    <div class="pinkClassification" @click="toImagePage">
                        <u-image width="100%" height="80rpx" src="/static/camera.png" mode="aspectFit"></u-image>
                        <p class="functionText">通用物体和场景识别</p>
                    </div>
                </u-grid-item>
                <u-grid-item>
                    <div class="pinkClassification" @click="toQuestionBank">
                        <u-image width="100%" height="80rpx" src="/static/university_logo.png" mode="aspectFit"></u-image>
                        <p class="functionText">华工题目查询</p>
                    </div>
                </u-grid-item>
            </u-grid>

            <h1 class="classification">计算器</h1>
            <!-- 宫格布局（2列） -->
            <u-grid :col="2" :border="false">
                <!-- 使用v-for遍历数组（注意！:key绑定的不能是一个对象，而是具体的字符串等数据，否则会有警告）
                :custom-style="{alignItems: 'flex-start'}"为自定义样式，这里设置为居左-->
                <u-grid-item :custom-style="{ alignItems: 'flex-start' }">
                    <div class="blueClassification" @click="toBmiPage">
                        <u-image width="100%" height="80rpx" src="/static/BMI.png" mode="aspectFit"></u-image>
                        <p class="functionText">BMI计算器</p>
                    </div>
                </u-grid-item>
                <u-grid-item><div class="blueClassification"></div></u-grid-item>
            </u-grid>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        // 跳转到“通用物体和场景识别”页面
        toImagePage() {
            // 进行跳转前，需要在pages.json进行“配置路由”
            uni.navigateTo({
                url: "image-recognition"
            });
        },
        // 跳转到BMI计算器的页面
        toBmiPage() {
            uni.navigateTo({
                url: "bmi-project"
            });
        },
        // 跳转到华南理工大学自学考试平台题目查询的页面
        toQuestionBank(){
            uni.navigateTo({
                url: "question_bank"
            });
        }
    }
};
</script>

<style lang="scss" scoped>
// 顶部的背景图片(使用的是Base64编码，在UniApp中无法使用资源引用作为背景图片)
$topBackground: url("");
// 粉色背景图片
$pinkBackground: url("");
// 蓝色背景图片
$blueBackground: url("");

/* 顶部背景图片 */
#topBackground {
    width: 100%;
    height: 300rpx;
    padding-top: 30rpx;
    /* 这里使用scss的变量，在上面已经有定义了 */
    background-image: $topBackground;
    /* 背景图片自适应父容器大小而自动变化 */
    background-size: cover;
}

/* 顶部标题 */
#title {
    text-align: center;
    margin: 0 auto;
    font-size: 50rpx;
    color: #fff;
}

/* 展示工具的div */
#toolDiv {
    margin-top: 10rpx;
    margin-left: 50rpx;
    margin-right: 30rpx;
}

/* 种类的标题 */
.classification {
    font-size: 50rpx;
    text-align: left;
    margin-top: 40rpx;
}

// 粉色和蓝色背景
.pinkClassification,
.blueClassification {
    width: 90%;
    height: 200rpx;
    // 这里不使用box-shadow，因为这是含有透明区域的png图片，如果用box-shadow，那么只会在图片的最外围加阴影，而不是在图形的实际区域添加阴影
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 50%));
    // 如果没有指定background-size，图片会被截短
    background-size: 100% 100%;
    padding-top: 28rpx;
}

/* 粉色卡片背景 */
.pinkClassification {
    background-image: $pinkBackground;
}

/* 蓝色卡片背景 */
.blueClassification {
    background-image: $blueBackground;
}

/* 功能介绍 */
.functionText {
    font-size: 32rpx;
    color: white;
    margin-top: 14rpx;
    text-align: center;
}
</style>
